<template>
  <div>
    <button @click="lengChange1">切换第一个系列</button>
    <button @click="lengChange2">切换第二个系列</button>
    <div class="chart1" ref="chart1"></div>
    <div class="map1" id="map"></div>
    <!-- 百度地图组件 -->
    <baidu-map class="map2" scroll-wheel-zoom :center="{ lng: 117.2, lat: 31.79 }" :zoom="15">
      <bm-marker :position="{lng: 117.2, lat: 31.79}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
        <bm-label content="我爱大合肥" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}"/>
      </bm-marker>
  </baidu-map>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'DashBoard',
  data () {
    return {
      chart1: null,
      map: null
    }
  },
  methods: {
    lengChange1 () {
      this.chart1.dispatchAction({
        type: 'legendToggleSelect',
        name: '销量'
      })
    },
    lengChange2 () {
      this.chart1.dispatchAction({
        type: 'legendToggleSelect',
        name: '销售额'
      })
    },
    resizeChart () {
      window.addEventListener('resize', () => {
        this.chart1.resize()
      })
    },
    initChart () {
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(this.$refs.chart1)
      this.chart1 = myChart
      // 指定图表的配置项和数据
      const option = {
        title: {
          // text: '{a|a标签内容}',
          // textStyle: {
          //   color: 'red',
          //   rich: {
          //     a: {
          //       width: 200,
          //       height: 200,
          //       backgroundColor: {
          //         image: 'https://img1.baidu.com/it/u=3430919243,3634445490&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500'
          //       }
          //     }
          //   }
          // }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          formatter: '{a0}-{b0}:{c0} 件 <br/> {a1}-{b1}:{c1} 元'
          // formatter: '{a}- <br/>{b}:{c} 元'
          // valueFormatter: value => value + '件'
        },
        toolbox: {
          feature: {
            saveAsImage: {},
            restore: {},
            dataView: {},
            dataZoom: {},
            magicType: {}
          }
        },
        legend: {
          data: [
            {
              name: '销量',
              icon: 'image://https://img2.baidu.com/it/u=853774077,3219552374&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889'
            },
            {
              name: '销售额'
            }
          ]
        },
        xAxis: {
          name: '{a|x轴}',
          nameTextStyle: {
            rich: {
              a: {
                color: 'red'
              }
            }
          },
          axisLabel: {
            rotate: 45,
            formatter: '{value}商品'
          },
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {

        },
        color: ['#dcac34', '#34e567'],
        backgroundColor: '#dedce3',
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          },
          {
            name: '销售额',
            type: 'line',
            smooth: true,
            data: [12, 4, 23, 56, 45, 9]
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)

      this.chart1.on('click', e => {
        console.log(e)
      })
    },
    initMap () {
      const map = new AMap.Map('map', {
        zoom: 11, // 级别
        center: [117.38, 31.80923], // 中心点坐标
        viewMode: '3D'// 使用3D视图
      })
      this.map = map
      // 使用插件
      // AMap.plugin('AMap.ToolBar', () => {
      //   var toolbar = new AMap.ToolBar();
      //   map.addControl(toolbar);
      // })
      AMap.plugin('AMap.Weather', function () {
        // 创建天气查询实例
        const weather = new AMap.Weather()

        // 执行实时天气信息查询
        weather.getLive('合肥', function (err, data) {
          console.log(err, data)
        })
      })
    }
  },
  mounted () {
    this.initChart()
    this.resizeChart()
    this.initMap()
  }
}
</script>

<style lang="scss" scoped>
.chart1 {
  max-width: 800px;
  height: 600px;
  margin: 20px auto;
  background-color: #c39c9c;
}

.map1 {
  max-width: 800px;
  height: 600px;
}
.map2 {
  max-width: 800px;
  height: 600px;
}
</style>
